<template>
  <!-- 新碟上架 -->
  <div class="g-wrap">
    <div class="new">
      <div class="v-hd">
        <a href="javascript:;" class="tit">新碟上架</a>
        <span class="more">
          <a href="javascript:;" class="mores">更多</a>
          <i class="s-arrow"></i>
        </span>
      </div>
      <div class="n-disk">
        <div class="inner">
          <a
            href="javascript:void(0);"
            class="inner_btn inner_last"
            @click="prev"
          ></a>
          <a
            href="javascript:void(0);"
            class="inner_btn inner_next"
            @click="next"
          ></a>
          <div class="five_song">
            <div class="big_imgBox flex" ref="box">
              <ul class="first_s flex">
                <li v-for="item in Newest" :key="item.id">
                  <div class="u-cover u-cover-alb1">
                    <img
                      class="j-img"
                      data-src="http://p4.music.126.net/hVVNPCyCxQV3U9HH8Y8fxA==/109951166363914914.jpg?param=100y100"
                      :src="item.blurPicUrl"
                    />
                    <a
                      :title="item.name"
                      href="/album?id=132874562"
                      class="msk"
                    ></a>
                    <a
                      href="javascript:;"
                      class="icon-play f-alpha f-fr"
                      title="播放"
                      data-res-type="19"
                      data-res-id="132874562"
                      data-res-action="play"
                    ></a>
                  </div>
                  <p class="f-thide">
                    <a
                      :title="item.name"
                      href="/album?id=132874562"
                      class="s-fc0 tit"
                      >{{ item.name }}</a
                    >
                  </p>
                  <p class="tit f-thide">
                    <a class="s-fc3" href="/artist?id=12236125">{{
                      item.artists[0].name
                    }}</a>
                    <!-- &nbsp;/&nbsp; -->
                    <a class="s-fc3" href="/artist?id=1203045"></a>
                  </p>
                </li>
              </ul>
              <ul class="first_s flex">
                <li v-for="item in Newest" :key="item.id">
                  <div class="u-cover u-cover-alb1">
                    <img
                      class="j-img"
                      data-src="http://p4.music.126.net/hVVNPCyCxQV3U9HH8Y8fxA==/109951166363914914.jpg?param=100y100"
                      :src="item.blurPicUrl"
                    />
                    <a
                      :title="item.name"
                      href="/album?id=132874562"
                      class="msk"
                    ></a>
                    <a
                      href="javascript:;"
                      class="icon-play f-alpha f-fr"
                      title="播放"
                      data-res-type="19"
                      data-res-id="132874562"
                      data-res-action="play"
                    ></a>
                  </div>
                  <p class="f-thide">
                    <a
                      :title="item.name"
                      href="/album?id=132874562"
                      class="s-fc0 tit"
                      >{{ item.name }}</a
                    >
                  </p>
                  <p class="tit f-thide">
                    <a class="s-fc3" href="/artist?id=12236125">{{
                      item.artists[0].name
                    }}</a>
                    <!-- &nbsp;/&nbsp; -->
                    <a class="s-fc3" href="/artist?id=1203045"></a>
                  </p>
                </li>
              </ul>
              <ul class="first_s flex">
                <li v-for="item in Newest" :key="item.id">
                  <div class="u-cover u-cover-alb1">
                    <img
                      class="j-img"
                      data-src="http://p4.music.126.net/hVVNPCyCxQV3U9HH8Y8fxA==/109951166363914914.jpg?param=100y100"
                      :src="item.blurPicUrl"
                    />
                    <a
                      :title="item.name"
                      href="/album?id=132874562"
                      class="msk"
                    ></a>
                    <a
                      href="javascript:;"
                      class="icon-play f-alpha f-fr"
                      title="播放"
                      data-res-type="19"
                      data-res-id="132874562"
                      data-res-action="play"
                    ></a>
                  </div>
                  <p class="f-thide">
                    <a
                      :title="item.name"
                      href="/album?id=132874562"
                      class="s-fc0 tit"
                      >{{ item.name }}</a
                    >
                  </p>
                  <p class="tit f-thide">
                    <a class="s-fc3" href="/artist?id=12236125">{{
                      item.artists[0].name
                    }}</a>
                    <!-- &nbsp;/&nbsp; -->
                    <a class="s-fc3" href="/artist?id=1203045"></a>
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { getNewest } from "../../http/api";
export default {
  data() {
    return {
      Newest: [],
      page: 1,
    };
  },
  mounted() {
    getNewest().then((resopnse) => {
      // console.log(resopnse);
      if (resopnse.code === 200) {
        this.Newest = resopnse.albums.slice(0, 10);
        // console.log(this.Newest);
      }
    });
  },
  methods: {
    //新碟上架右边移动
    next() {
      this.page += 1;
      if (this.page > 3) {
        this.$refs.box.style.transform = `translateX(-645px)`;
        this.$refs.box.style.transition = `none`;
        setTimeout(() => {
          this.page = 2;
          this.$refs.box.style.transform = `translateX(-1290px)`;
          this.$refs.box.style.transition = `.5s`;
        }, 0);
      } else {
        this.$refs.box.style.transform = `translateX(-${this.page * 645}px)`;
        this.$refs.box.style.transition = `.5s`;
      }
    },
    //新碟上架左边移动
    prev() {
      this.page -= 1;

      if (this.page == -1) {
        this.$refs.box.style.transform = `translateX(-1290px)`;
        this.$refs.box.style.transition = `none`;

        setTimeout(() => {
          this.page = 1;
          this.$refs.box.style.transform = `translateX(-645px)`;
          this.$refs.box.style.transition = `.5s`;
        }, 0);
      } else {
        this.$refs.box.style.transform = `translateX(-${this.page * 645}px)`;
        this.$refs.box.style.transition = `.5s`;
      }
    },
  },
};
</script>
 
<style lang = "less" scoped>
/* 新碟上架 */
.n-disk {
  position: relative;
  zoom: 1;
  height: 186px;
  margin: 20px 0 37px;
  border: 1px solid #d3d3d3;
}
.n-disk .inner {
  height: 184px;
  padding-left: 16px;
  background: #f5f5f5;
  border: 1px solid #fff;
}
.inner_btn {
  position: absolute;
  width: 17px;
  height: 17px;
  top: 71px;
}

.inner_last {
  left: 4px;
  background: url("../../assets/images/index.png") -260px -75px no-repeat;
}

.inner_last:hover {
  background: url("../../assets/images/index.png") -280px -75px no-repeat;
}

.inner_next {
  background: url("../../assets/images/index.png") -300px -75px no-repeat;
  right: 10px;
}

.inner_next:hover {
  background: url("../../assets/images/index.png") -320px -75px no-repeat;
}

.five_song {
  position: relative;
  float: left;
  width: 645px;
  height: 180px;
  overflow: hidden;
}

.big_imgBox {
  width: 1935px;
  height: inherit;
  position: absolute;
  transform: translate(-645px);
}

/* .big_imgBox {
  transition: 0.5s;
} */

.five_song ul {
  /* position: absolute; */
  /* top: 0; */
  /* width: 645px; */
  margin: 28px 0 0 0;
  height: calc(180px - 28px);
  float: left;
}

.five_song ul li {
  float: left;
  display: inline;
  width: 118px;
  height: 150px;
  margin-left: 11px;
  background: url("../../assets/images/index.png") no-repeat 0 9999px;
  background-position: -260px 100px;
  font-size: 12px;
  /* margin-left: 25px; */
}
.n-disk .u-cover {
  margin-bottom: 7px;
}
.u-cover {
  position: relative;
  display: block;
}
.u-cover-alb1 {
  width: 100px;
  height: 100px;
}
.u-cover img {
  display: block;
  width: 100%;
  height: 100%;
}

.u-cover .msk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../../assets/images/coverall.png") no-repeat;
}
.u-cover-alb1 .msk {
  width: 118px !important;
  height: 100px !important;
  background-position: 0 -570px;
}
.n-disk p {
  width: 90%;
  line-height: 18px;
  margin: 0;
}

.f-thide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

.f-thide a {
  cursor: pointer;
  color: #000;
}

.f-thide .s-fc3 {
  color: #666;
}

.v-hd {
  height: 33px;
  padding: 0 10px 0 34px;
  background: url("../../assets/images/index.png") no-repeat;
  background-position: -225px -156px;
  border-bottom: 2px solid #c10d0c;
}
.v-hd .tit {
  float: left;
  font-size: 20px;
  font-weight: normal;
  line-height: 28px;
  color: #333;
}
.v-hd .tab {
  float: left;
  margin: 7px 0 0 20px;
}
.tit-s,
a.tit-s:hover {
  color: #666;
}
.tit-s:hover {
  color: #666;
  text-decoration: underline;
}
.v-hd .tab .line {
  margin: 0 10px;
  color: #ccc;
}
.v-hd .more {
  float: right;
  margin-top: 9px;
}
.more .mores,
.mores:hover {
  color: #666;
}
.more .mores:hover {
  text-decoration: underline;
}
.s-arrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: middle;
  background: url("../../assets/images/index.png") no-repeat;
  background-position: 0 -240px;
}
</style>